import React, { useEffect, useRef } from 'react'
import TitleSearch from '../../components/TitleSearch'
import {
    EditOutlined,
    DeleteOutlined
} from '@ant-design/icons';
import { useState } from 'react';
import { Button, Form, Image, Input, InputNumber, message, Pagination, Popconfirm, Space, Table, Typography } from 'antd';
import api from '../../api';
import PackageAcoins from './PackageAcoins';


const columns = [
    {
        title: '套餐编号',
        dataIndex: '_id',
        width: '25%',

        align: 'center'
    },
    {
        title: '名称',
        dataIndex: 'name',
        width: '15%',

        align: 'center'
    },
    {
        title: '价格',
        dataIndex: 'normalPrice',
        width: '15%',

        align: 'center',
    },
    {
        title: '打折价格',
        dataIndex: 'salePrice',
        width: '15%',

        align: 'center'
    },


];

const PackagePage = () => {
    const mergeColumns = [
        ...columns,
        {
            title: '操作',
            width: '20%',
            align: 'center',
            // record是拿到整个数据对象
            render: (record) => {
                return (
                    <Space>
                        <Button type="primary" icon={<EditOutlined />} onClick={() => {
                            packRef.current.showMod(record)
                        }}>修改</Button>

                        <Popconfirm
                            title="确定删除该数据吗?"
                            description="删除之后无法更改,是否继续删除?"
                            onConfirm={() => {
                                removeData(record._id)
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type="primary" danger icon={<DeleteOutlined />} >删除</Button>
                        </Popconfirm>
                    </Space>
                )
            },
        },
    ]

    const [data, setData] = useState([]);

    const packRef = useRef(null)
  
    useEffect(() => {
        getmealData()
    }, [])

    // 获取套餐详情页
    const getmealData = async () => {
        const res = await api.meal.getAllmeals({

        })
        console.log('套餐', res);
        if (res.meta.status == 200) {
            setData(res.data)
          
        }
    }
    // 删除套餐
    const removeData = async (_id) => {
        const res = await api.meal.remove({ _id })
        if (res.meta.status) {
            message.open({
                type: 'success',
                content: '数据删除成功'
            })
            getmealData()
        }
    }
    const onOk = () => {
        packRef.current.showMod()
    }

    return (
        <div>
            <TitleSearch title='套餐管理' onOk={onOk} />
            <Table
                // 表格边框
                bordered
                // 数据项
                dataSource={data}
                // 表格列
                columns={mergeColumns}
                // 每一项的key
                rowKey='_id'
            />
            <PackageAcoins ref={packRef} getmealData={getmealData} />      

        </div>
    )
}

export default PackagePage